<template>
  <div class="uploadBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>更换头像</span>
      </div>
      <el-upload ref="upload" action="#" list-type="picture-card" :auto-upload="false" :limit="1" :on-change="init">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>

      <el-dialog :visible.sync="dialogVisible">
        <img ref="view" width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>

      <div class="cropper">
        <vueCropper
            @mouseenter.native="enter"
            @mouseleave.native="leave"
            ref="cropper"
            :img="option.img"
            :outputSize="option.outputSize"
            :outputType="option.outputType"
            :info="option.info"
            :full="option.full"
            :fixed="true"
            :autoCrop="true"
            :autoCropWidth="100"
            :autoCropHeight="100"
      ></vueCropper>
      </div>
      <div class="submitBox">
        <el-button type="primary" @click="submitForm">上传</el-button>
        <el-button type="primary" @click="view">预览</el-button>
        <el-button type="info"  @click="clearAll">重置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
import { userApi } from '../../apis/user'
const user = userApi()
export default {
  name: 'UpdateAvatar',
  components: {
    VueCropper
  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      option: {
        img: '',
        outputSize: 1,
        outputType: 'png',
        fixed: true,
        info: true,
        full: false
      },
      CropperShow: false
    }
  },
  methods: {
    handleRemove () {
      this.clearAll()
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    init () {
      this.CropperShow = true
      this.option.img = this.$refs.upload.uploadFiles[0].url
    },
    clearAll () {
      this.$refs.upload.clearFiles()
      this.option.img = ''
    },
    enter () {
      if (this.option.img === '') {
        return
      }
      this.$refs.cropper.startCrop()
    },
    leave () {
      this.$refs.cropper.stopCrop()
    },
    resetForm () {
      console.log('重置')
    },
    view () {
      this.$refs.cropper.getCropData(data => {
        this.dialogImageUrl = data
        this.dialogVisible = true
      })
    },
    submitForm () {
      this.$refs.cropper.getCropData(data => {
        if (!data) {
          this.$message({
            message: '请选择图片进行裁剪',
            type: 'info'
          })
          return
        }
        user.changeUserInfo({ avatarurl: data, username: this.$store.state.user.username }).then(res => {
          this.$bus.$emit('updateAvatar', data)
          this.clearAll()
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
.cropper{
  width: 400px;
  height: 300px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.submitBox{
  width: 400px;
  display: flex;
  justify-content: space-around;
}
.uploadBox {
  padding: 10px;
  height: 100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.upload {
  --border-color: #9aa0a9;
  --font-color: #8c939d;
  --primary-color: #1f2d3d;
  --danger-color: #eb685e;
}

.upload * {
  box-sizing: border-box;
}

.upload {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.upload .preview {
  object-fit: contain;
  z-index: 1;
}

.upload > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.upload > div {
  display: none;
  z-index: 2;
}

.upload.select .upload-select {
  display: block;
}
.upload.select .preview {
  display: none;
}

.upload.progress .upload-progress {
  display: block;
}

.upload.result .upload-result {
  display: block;
}

.upload-select {
  border-radius: inherit;
  border: 1px dashed var(--border-color);
  cursor: pointer;
}
.upload-select::before,
.upload-select::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: var(--font-color);
  transform: translate(-50%, -50%);
}
.upload-select::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.upload-select input {
  display: none;
}
.upload-select:hover {
  border-color: var(--primary-color);
}

.upload-progress {
  background: #00000080;
}

.progress-bar {
  position: absolute;
  width: 90%;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
}
.progress-bar::before {
  counter-reset: progress var(--percent);
  content: counter(progress) "%";
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}
.progress-bar::after {
  content: "";
  position: absolute;
  left: 0;
  border-radius: inherit;
  width: calc(1% * var(--percent));
  height: 100%;
  background: var(--primary-color);
}
.upload-progress::after {
  content: "文件上传中...";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 5px);
  white-space: nowrap;
  opacity: 0.8;
  color: #fff;
  font-size: 12px;
}
.upload button {
  border: none;
  outline: none;
  background: none;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
  user-select: none;
}
.progress-bar button {
  left: 50%;
  position: absolute;
  top: 25px;
  transform: translateX(-50%);
}
.progress-bar button:hover {
  color: var(--danger-color);
}

.upload-result {
  border: 1px dashed var(--border-color);
  border-radius: inherit;
  overflow: hidden;
}

.upload-result button {
  width: 30px;
  height: 20px;
  background: var(--font-color);
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 2px;
  color: #fff;
}
.upload-result button:hover {
  background: var(--danger-color);
}
</style>
